<template>
	<view style="margin-top: 10upx;">
		<view class="passlevel flex align-center">
			<view v-if="level<5" class="bg1"></view>
			<view v-if="level>1 && level<5" class="bg2"></view>
			<view v-if="level>3" class="bg3"></view>
		</view>
		<view class="passlevel flex align-center">
			<view v-if="level<5" class="text1">安全性低</view>
			<view v-if="level>1 && level<5" class="text2">安全性一般</view>
			<view v-if="level>3" class="text3">安全性高</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			level:0
		},
		data() {
			return {

			}
		},
		methods: {
			tolink(){
				
			}
		}
	}
</script>

<style scoped lang="less">
	.passlevel{
		width: 660upx;
		border-radius: 5upx;
		overflow: hidden;
		font-size: 26upx;
	}
	.passlevel view{
		width:220upx;
	}
	.bg1{
		background:#ff5c5c;
		height: 10upx;
	}
	.bg2{
		background:#ffb632;
		height: 10upx;
	}
	.bg3{
		background:#64b775;
		height: 10upx;
	}
	.text1{
		color: #ff5c5c;
	}
	.text2{
		color: #ffb632;
	}
	.text3{
		color: #64b775;
	}
</style>
